<template>
	<view class="m-navs">
		<view class="flex-start">
			<view class="item" v-for="(item,index) in list" :key="index" v-if="!isImage && item.show" @click="click(item.params)">
				<u-icon 
					:label="item.label"
					labelPos="bottom" 
					:size="size" 
					:labelSize="labelSize"
					:space="space"
					:name="item.name">
				</u-icon>
			</view>
			<view class="img-list flex-between" v-if="isImage">
				<view class="img-item" v-for="(item,index) in list" v-if="item.show" @click="click(item.params)">
					<u--image :showLoading="true" :src="item.name" width="100%" height="80px"></u--image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"m-navs",
		props: ['list','size','labelSize','space','isImage'],
		data() {
			return {
			// 	'isImage':false,
			// 	'iconSize':this.size
			};
		},
		methods: {
			click(params){
				if(params){
					if(params.url){
						if(params.type == 'page'){
							uni.navigateTo({
								url: params.url
							});
						}
						if(params.type == 'link'){
							this.$util.openUrl(params.url)
						}
					}
				}
			}
		},
	}
</script>

<style>
	.m-navs{
		padding-top: 15px;
/* 		width: 100%;
		padding-top: 15px; */
	}
	.m-navs .item{
		width: 20%;
		padding-bottom: 15px;
	}
	.img-list{
		width: 100%;
		padding: 0 30rpx;
		padding-bottom: 15px;
	}
	.img-item{
		width: 48%;
		border-radius: 5px;
		overflow: hidden;
	}
	/deep/ uni-image>div, uni-image>img{
		image-rendering: -moz-crisp-edges;
		image-rendering: -o-crisp-edges;
		image-rendering: -webkit-optimize-contrast;
		image-rendering: crisp-edges;
		-ms-interpolation-mode: nearest-neighbor;
	}
/* 	.m-navs .item.img{
		width: 50%!important;
		border-radius: 5px;
	} */
</style>
